<template>
  <div>
    <van-search v-model="searchform.strAppname" placeholder="请输入名称"/>
    <div style="height: 11rem;overflow: auto">
      <p v-if="listData.lengh===0" class="yyp">暂无数据~</p>
      <van-swipe-cell v-else v-for="item in listData" :key="item.id">
        <div class="yycard">
          <div class="yycard_p">
            <p>素材标签：{{item.STR_MATERIALNAME}}</p>
            <p>素材类型：{{item.APPTYPENAME}}</p>
            <p class="van-card__desc van-ellipsis ellipsisp">素材下载链接：{{item.STR_DOWNLOAD}}</p>
          </div>
        </div>
        <template #right>
          <van-button @click="removeInfo(item)" square text="移除" type="danger" class="delete-button"/>
        </template>
      </van-swipe-cell>
    </div>
    <van-button type="primary" block @click="getaddMaterial">添加</van-button>
  </div>
</template>

<script>
  import {MaterialData, scdeleteInfo} from '@/api/application'
  import {Dialog} from "vant";

  export default {
    name: 'ApplicationData',
    data() {
      return {
        listData: [],
        loading: false,
        searchform: {
          strAppname: '',
          iApptype: ''
        }
      }
    },
    created() {
      this.iAppnum = this.$route.query.rowAll
      this.fetchData()
    },
    methods: {
      //获取详情中素材数据
      fetchData() {
        MaterialData({iAppnum: this.iAppnum}).then(res => {
          this.listData = res.ordInfoList
        })
      },
      //跳转搜索所有素材界面
      getaddMaterial() {
        this.$router.push({path: 'addMaterialData', query: {rowAll: this.iAppnum}})
      },
      //移除素材
      removeInfo(item) {
       // let scArr = [];
        /*let str = '';
        this.listData.forEach((item, index) => {
          scArr.push(item.ID)
        });
        str += scArr.join(',')*/
        scdeleteInfo({idInfo: item.REFID})
        Dialog.confirm({
          message: '确定移除该数据?'
        }).then(res => {
          //this.$toast('移除成功');
          this.$toast.success('移除成功')
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .yyp {
    text-align: center;
    font-size: 14px;
    color: #8c8a8a;
    line-height: 2;
  }

  .yycard {
    display: flex;
    border-bottom: 1px solid whitesmoke;
    padding: 5px 0;
    margin-left: 20px;
  }

  .yyimg {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    background-color: #F5F7FA;
  }

  .yycard_p {
    font-size: 14px;
    line-height: 20px;
    vertical-align: middle;
    padding-left: 10px;
    color: #6b6b6b;
  }

  .yycard_title {
    font-size: 14px;
    color: #000;
  }

  .van-button--primary {
    background-color: #0c1b35;
    border-color: #0c1b35;
    border-radius: 4px;
    width: 90%;
    margin: 20px;
  }

  .van-button--danger {
    height: 100%;
  }

  .delete-button2 {
    background-color: #6b6b6b;
    border: 1px solid #6b6b6b;
  }

  /deep/ .van-search__content {
    border-radius: 20px;
    background-color: #e7e9ec;
  }

  .ellipsisp{
    width: 330px;
  }

</style>
